import './Scss/SupervisionAttendance.scss'
import dayjs from 'dayjs'
import { Http } from '../../../../Common/Api'
import { Pie } from '@ant-design/plots'
import { useState, useEffect } from 'react'
import { useRequest } from 'ahooks'

export const SupervisionAttendance001 = ({ title }) => {
    const [Color] = useState(['#07CCB0', '#BFFFA7', '#FF817C', '#ACCDFF', '#B9ECED'])
    const [Data, setData] = useState([])

    const [PieCharts, setPieCharts] = useState()

    const { run: getPersonStatGetPersonTypeStatAttendanceByOrg } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            let dataTwo = []
            const sum = list.reduce((acc, cur) => acc + cur.personCount, 0)
            list.forEach(({ uuid, tableName, personCount, attendanceCount }) => {
                data = [
                    ...data,
                    {
                        uuid,
                        type: tableName,
                        value: parseInt((personCount / sum) * 10000) / 100 || 0,
                        personCount,
                        attendanceCount,
                    },
                ]
                dataTwo = [...dataTwo, { name: '进场人数', type: tableName, value: personCount, uuid }]
            })
            setData(data)
        },
    })

    useEffect(() => {
        getPersonStatGetPersonTypeStatAttendanceByOrg({
            url: 'getPersonStatGetPersonTypeStatAttendanceByOrg',
            data: {
                OrgType: 2,
                Date: dayjs().format('YYYY-MM-DD'),
            },
        })
    }, [getPersonStatGetPersonTypeStatAttendanceByOrg])

    useEffect(() => {
        if (Data) {
            let number = 0
            Data.forEach(({ personCount }) => (number += personCount))

            const config = {
                width: 140,
                height: 140,
                data: Data,
                angleField: 'value',
                colorField: 'type',
                color: Color,
                radius: 1,
                innerRadius: 0.7,
                interactions: [{ type: 'element-default' }],
                label: false,
                tooltip: false,
                legend: false,
                statistic: {
                    title: {
                        offsetY: 5,
                        style: { fontSize: 30, fontFamily: 'Bahnschrift', fontWeight: 'bold', color: '#FFFFFF' },
                        content: number.toString(),
                    },
                    content: {
                        offsetY: 10,
                        style: { fontSize: '16px', fontFamily: 'PingFang', fontWeight: 'bold', color: '#60EAFF' },
                        content: '进场人数',
                    },
                },
                pieStyle: { lineWidth: 0 },
            }
            setPieCharts(config)
        }
    }, [Color, Data])
    return (
        <div className="SupervisionAttendance001">
            {!title && (
                <div className="TitleSmall">
                    <div>进场人员占比</div>
                    <div />
                </div>
            )}
            <div className="Pie">
                {PieCharts && <Pie {...PieCharts} />}
                <div className="Table">
                    {Data.map(({ uuid, type, value }, index) => (
                        <div key={uuid}>
                            <div style={{ color: Color[index] }}>{type}</div>
                            <div>{value} %</div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}

export const SupervisionAttendanceA01 = ({ title }) => {
    const [Color] = useState(['#07CCB0', '#BFFFA7', '#FF817C', '#ACCDFF', '#B9ECED'])
    const [Data, setData] = useState([])

    const [PieCharts, setPieCharts] = useState()

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            let dataTwo = []
            const sum = res.list.reduce((acc, cur) => acc + cur.personCount, 0)
            res.list.forEach(({ uuid, tableName, personCount, attendanceCount }) => {
                data = [
                    ...data,
                    {
                        uuid,
                        type: tableName,
                        value: parseInt((personCount / sum) * 10000) / 100 || 0,
                        personCount,
                        attendanceCount,
                    },
                ]
                dataTwo = [...dataTwo, { name: '进场人数', type: tableName, value: personCount, uuid }]
            })
            setData(data)
        },
    })

    useEffect(() => {
        runAsync({
            url: 'getJianLiAttendance',
            data: { ParentUuid: '2f39b286-14e5-4164-ab91-5c953df62067', Date: dayjs().format('YYYY-MM-DD') },
        })
    }, [runAsync])

    useEffect(() => {
        if (Data) {
            let number = 0
            Data.forEach(({ personCount }) => (number += personCount))

            const config = {
                width: 140,
                height: 140,
                data: Data,
                angleField: 'value',
                colorField: 'type',
                color: Color,
                radius: 1,
                innerRadius: 0.7,
                interactions: [{ type: 'element-default' }],
                label: false,
                tooltip: false,
                legend: false,
                statistic: {
                    title: {
                        offsetY: 5,
                        style: { fontSize: 30, fontFamily: 'Bahnschrift', fontWeight: 'bold', color: '#FFFFFF' },
                        content: number.toString(),
                    },
                    content: {
                        offsetY: 10,
                        style: { fontSize: '16px', fontFamily: 'PingFang', fontWeight: 'bold', color: '#60EAFF' },
                        content: '进场人数',
                    },
                },
                pieStyle: { lineWidth: 0 },
            }
            setPieCharts(config)
        }
    }, [Color, Data])
    return (
        <div className="SupervisionAttendance001">
            {!title && (
                <div className="TitleSmall">
                    <div>进场人员占比</div>
                    <div />
                </div>
            )}
            <div className="Pie">
                {PieCharts && <Pie {...PieCharts} />}
                <div className="Table">
                    {Data.map(({ uuid, type, value }, index) => (
                        <div key={uuid}>
                            <div style={{ color: Color[index] }}>{type}</div>
                            <div>{value} %</div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}
